<template>
	<view>
		<uni-card :is-shadow="false" :border="false">
			<view class="p_avatar">
				<u-upload
					:fileList="fileList"
					@afterRead="afterRead"
					name="file"
				>
					<u-avatar :src="user.headUrl" mode="square" size="160"></u-avatar>
				</u-upload>
			</view>
			<view>			
				<u--form labelPosition="left" :model="user" ref="form" :labelWidth="120">
					<u-form-item label="姓名" prop="realName" borderBottom>
						<u--input v-model="user.realName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="性别" prop="gender" borderBottom>
						<uni-data-checkbox v-model="user.gender" :localdata="genderList" />
					</u-form-item>
					<u-form-item label="邮箱" prop="email" borderBottom>
						<u--input type="email" v-model="user.email" border="none"></u--input>
					</u-form-item>
					<u-form-item label="手机" prop="mobile" borderBottom>
						<u--input v-model="user.mobile" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view class="p_btn">
					<button type="primary" @click="onSubmit">提交</button>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
import {useUserInfoApi, useUpdateApi} from '@/api/user';

export default {
	data() {
		return {
			user: {
				id: '',
				headUrl: '',
				realName: '',
				gender: 0,
				email: '',
				mobile: ''
			},
			fileList: [],
			genderList: [{
				text: '男',
				value: 0
			}, {
				text: '女',
				value: 1
			}, {
				text: '保密',
				value: 2
			}],
			rules: {
				realName: [
					{
						required: true,
						message: '必填项不能为空',
						trigger: ['blur', 'change']
					}
				],
				email: [
					{
						required: true,
						message: '必填项不能为空',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.email(value);
						},
						message: '邮箱不正确',
						trigger: ['blur', 'change']
					}
				],
				mobile: [
					{
						required: true,
						message: '必填项不能为空',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	onLoad() {
		// 获取用户信息
		useUserInfoApi().then(res =>{
			this.user = res.data
		});
	},
	onReady() {
		// 需要在onReady中设置规则
		this.$refs.form.setRules(this.rules)
	},
	methods: {
		async afterRead(event) {
			const url = await this.uploadFilePromise(event.file.url)
			this.user.headUrl = url;
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: `${uni.$u.http.config.baseURL}/sys/oss/upload?token=` + this.$store.state.user.token,
					filePath: url,
					name: 'file',
					success: (res) => {
						const result = JSON.parse(res.data)
						if(result.code != 0){
							uni.$u.toast(result.msg)
						}
						resolve(result.data.src)
					}
				});
			})
		},
		onSubmit(){
			this.$refs.form.validate().then(res => {
				useUpdateApi(this.user).then(res =>{
					uni.$u.toast('操作成功！')
					
					// 修改store用户信息
					const userInfo = this.$store.state.user.userInfo;
					userInfo.headUrl = this.user.headUrl;
					this.$store.commit('user/setUserInfo', userInfo);
				})
			})
		}
	}
}
</script>

<style lang="scss">
.p_avatar{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50rpx;
}
.p_btn{
	margin-top: 50rpx;
}
</style>
